<template>
  <div class="preselection-container app-container" ref="preselection">
    <div class="content-top">
      <!-- 步骤条 -->
      <div class="steps-wrap">
        <el-steps style="max-width: 100%" :active="stepsActive" finish-status="success">
          <el-step title="选择选品分类" />
          <el-step title="选择分类细分属性" />
          <el-step title="已完成步骤" />
          <el-step title="确认上架到商城" />
        </el-steps>
      </div>

      <!-- 搜索表单 -->
      <div class="search-wrap">
        <SearchForm colBtn :list="[...formList]" @submit="search" @reset="reset"></SearchForm>
      </div>
    </div>
    <div class="content-bottom">
      <!-- 关键词搜索框、编辑多选、更多筛选 -->
      <div class="searchkey-wrap">
        <div class="left">
          <div class="mr38">
            预选商品：<b>{{ total }}</b>
          </div>
          <el-input
            class="searchkey-input"
            v-model="postData.form.searchKey"
            @keydown.enter="handelSearch"
            @clear="handelSearch"
            style="width: 320px"
            placeholder="请输入商品名、类目名称搜索"
            clearable
          >
            <template #suffix>
              <el-icon class="el-input__icon">
                <Search />
              </el-icon>
            </template>
          </el-input>
        </div>
        <div class="right">
          <el-button :type="isEdit ? '' : 'primary'" link @click="cancel(!isEdit)">
            编辑多选
            <el-icon class="ml6">
              <Edit />
            </el-icon>
          </el-button>
          <el-divider direction="vertical" />
          <el-button type="primary" link @click="isOpenAttrFilter = true">
            更多筛选
            <el-icon class="ml6">
              <ArrowRight />
            </el-icon>
          </el-button>
        </div>
      </div>
      <el-container>
        <el-aside :class="{ 'fix-wrap': showSelect }">
          <div>
            <div style="border-radius: 0 0 0 10px">
              <div class="title f18">
                商品分类
                <div class="gray-btn">
                  <div>已上架总数：{{ pubLicNum }}</div>
                  <!-- <div>可加购：{{ pubLicNum }}</div> -->
                </div>
              </div>
              <el-tree
                :default-expand-all="false"
                node-key="categoryId"
                :data="treeData"
                accordion
                :expand-on-click-node="true"
                :current-node-key="currentNodeKey"
                highlight-current
                @node-click="handleNodeClick"
              >
                <template #default="{ node, data }">
                  <span class="custom-tree-node">
                    <span>{{ data.name }}</span>
                    <span> ({{ data.selectedNum }}) </span>
                  </span>
                </template>
              </el-tree>
            </div>

            <div class="submit-btn">
              <div>
                <el-button
                  style="width: 200px"
                  type="info"
                  plain
                  @click="$router.push({ path: '/products/selection', query: {} })"
                  >返回</el-button
                >
              </div>
              <!-- <p>
                您还可加购商品数：{{
                  JSON.stringify(currNode) !== "{}" ? currNode.notSelectNum - checkList.length : selectNum - checkList.length
                }}
              </p> -->
            </div>
          </div>
        </el-aside>
        <el-main>
          <el-row>
            <!-- <p class="tips" v-show="showTips && isEdit">
              <span class="text-over">
                数据推荐：以往xxx分类中，销量较好商品位于_价格：25~65，85~120，区间，风格：现代，极简，为主，面料：布艺，定制：支持定制，为主。
              </span>
              <el-icon @click="showTips = !showTips"><CloseBold /></el-icon>
            </p> -->
            <el-checkbox-group v-loading="loading" v-if="shopList.length > 0" v-model="checkList" @change="handleCheckedChange">
              <el-col :span="6" v-for="(item, index) in shopList" :key="index" class="shop-box pd0">
                <div style="width: 100%">
                  <el-checkbox label="" v-show="isEdit" :value="item.collectId" />
                  <div class="top">
                    <div class="img-box jzt-cursor-point" @click="toView(item)">
                      <img :src="item.mainPicUrl" alt="" />
                    </div>
                  </div>
                  <div class="bottom">
                    <div class="header-title text-over jzt-cursor-point" :title="item.productName" @click="toView(item)">
                      <p class="text-over">
                        {{ item.productName }}
                      </p>
                    </div>
                    <div class="header-price jzt-flex-start">
                      <template v-if="$route.query?.type !== 'designer'">
                        <p class="f12">
                          工厂价 ¥ <span style="color: red">{{ item.factoryLowestPrice }}</span>
                          &nbsp;/&nbsp;
                        </p>
                      </template>
                      <p class="f12">
                        销售价 ¥ <span style="color: red">{{ item.businessLowestPrice || "-" }}</span>
                      </p>
                    </div>
                    <div>
                      <div class="choose-shop jzt-flex-bt pr5">
                        <p v-if="item.isShowSale">已售：{{ item.businessShowSaleNum }}</p>
                        <p v-if="item.isSupportBilling === 1">专票{{ item.specialTicket }}%、普票{{ item.ordinaryTicket }}%</p>
                        <p v-else>不支持开票</p>
                      </div>
                      <!-- <div class="choose-shop">选购商家：{{ item.selectNum }}</div> -->

                      <div class="btn-wrap">
                        <el-button
                          type="primary"
                          plain
                          style="width: 120px"
                          @click="
                            () => {
                              currObj = item;
                              _isOpen = true;
                            }
                          "
                        >
                          返还平台</el-button
                        >
                        <el-button type="primary" style="width: 120px" @click="openInfoDialog(item)"> 立即上架</el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-checkbox-group>

            <div v-else v-loading="loading" style="display: flex; justify-content: center; width: 100%">
              <el-empty description="暂无数据" />
            </div>
          </el-row>
          <div class="pagination" v-if="shopList.length > 0">
            <el-pagination
              v-model="postData.form.page"
              :page-size="postData.form.size"
              :page-sizes="[12, 24, 48, 96]"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            />
          </div>
          <div class="select-all-wrap" v-show="isEdit">
            <div>
              <el-checkbox v-model="selectAll" label="全选" :indeterminate="indeterminate" @change="clickSelectAll" />
              <div>
                <p class="mr16">已选中：{{ checkList.length }}</p>
                <el-button
                  type="primary"
                  plain
                  :disabled="checkList.length === 0"
                  @click="
                    () => {
                      _isOpen2 = true;
                    }
                  "
                  >返还平台</el-button
                >
                <!-- <el-button type="primary">立即上架</el-button> -->
                <el-button type="info" @click="cancel(false)">取消</el-button>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </div>
    <infoDetail :btnLoading="_btnLoading" :optionInfo="optionInfo" @submit="submitOk" @close="closeInfoDialog" />

    <!-- 单条返还 -->
    <ActionSubmitDialog
      v-model:isOpen="_isOpen"
      :message="'您正在操作将商品返还平台，会将选中的商品移除预选商品中心，请确认是否移除所选商品！'"
      @submit="returnSubmit(1)"
    />
    <!-- 批量返还 -->
    <ActionSubmitDialog
      v-model:isOpen="_isOpen2"
      :message="'您正在操作将商品返还平台，会将选中的商品移除预选商品中心，请确认是否移除所选商品！'"
      @submit="returnSubmit(2)"
    />
    <!-- 属性筛选 -->
    <attrFilter ref="attrFilterRef" v-model:isOpen="isOpenAttrFilter" :filterData="attrList" @changeAttr="changeAttr" />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, watch, nextTick } from "vue";
import { RefreshRight, Search, MoreFilled, CaretTop, Edit, ArrowRight, CloseBold } from "@element-plus/icons-vue";
import SearchForm from "@/components/SearchForm";
import {
  getPreCategoryList,
  getPreSelectList,
  getPublishNum,
  addTenantSelect,
  getNotSelectNum,
  readyListing,
  queryPreStastsList
} from "@/apis/products/selection";
import { returnPlat } from "@/apis/manage";
import { ElMessage } from "element-plus";
import useCodeArrStore from "../../../store/modules/select";
const store = useCodeArrStore();
import infoDetail from "./components/infoDetail.vue";
import ActionSubmitDialog from "@/components/ActionSubmitDialog";
import { useRoute } from "vue-router";
const route = useRoute();
import attrFilter from "./components/attrFilter.vue";
import { useElementSize } from "@vueuse/core";
const preselection = ref(null);
const { height, width } = useElementSize(preselection);

const stepsActive = ref(3);
const formList = ref([
  {
    label: "成本价",
    model: "minPrice-maxPrice",
    type: "numrange",
    labelWidth: "auto",
    isShow: route.query?.type === "designer" ? "false" : "true"
  },
  {
    label: "线上同款",
    model: "isOnlineEquivalent",
    type: "select",
    data: [
      { label: "线上有同款", value: 1 },
      { label: "线上无同款", value: 0 }
    ],
    labelWidth: "auto"
  },
  {
    label: "是否定制",
    model: "customType",
    type: "select",
    data: [
      { label: "是", value: "1" },
      { label: "否", value: "0" }
    ],
    labelWidth: "auto"
  },
  // {
  //   label: "商品风格",
  //   model: "productStyle",
  //   type: "select",
  //   data: store.getDict("shop_product_style"),
  //   labelWidth: "70",
  //   props: {
  //     label: "dictLabel",
  //     value: "dictValue"
  //   }
  // },
  {
    label: "是否有模型",
    model: "isModel",
    type: "select",
    data: [
      { label: "是", value: "1" },
      { label: "否", value: "0" }
    ],
    labelWidth: "auto"
  },
  {
    label: "区域销售数量",
    model: "areaId",
    type: "city-select",
    labelWidth: "auto",
    props: {
      expandTrigger: "hover",
      value: "cityCode",
      label: "name",
      multiple: false
    }
  },
  {
    label: "市场定位",
    model: "factoryGrade",
    type: "select",
    data: [],
    props: {
      label: "dictLabel",
      value: "dictValue"
    },
    labelWidth: "auto"
  },
  {
    label: "产地筛选",
    model: "buinessAddressIdList",
    type: "city-select",
    labelWidth: "auto",
    props: {
      expandTrigger: "hover",
      value: "cityCode",
      label: "name",
      multiple: true
    }
  },
  {
    label: "质量合格率",
    model: "demo",
    type: "select",
    data: [{ label: "数据累计统计中", value: 1 }],
    labelWidth: "auto",
    disabled: true
  },
  {
    label: "交期准时率",
    model: "demo",
    type: "select",
    data: [{ label: "数据累计统计中", value: 1 }],
    labelWidth: "auto",
    disabled: true
  },
  {
    label: "售后满意度",
    model: "demo",
    type: "select",
    data: [{ label: "数据累计统计中", value: 1 }],
    labelWidth: "auto",
    disabled: true
  }
]);
const _formList = ref(JSON.parse(JSON.stringify(formList.value)));
const total = ref(0);
const postData = reactive({
  form: {
    page: 1,
    size: 12,
    searchKey: ""
  }
});
const treeData = ref([]);
const shopList = ref([]);
const allowSelectList = ref([]); //当前页允许被选中的商品
const checkList = ref([]); //选中的商品ids
const selectAll = ref(false);
const indeterminate = ref(false);
const isEdit = ref(false); //是否进入可选中编辑状态
const loading = ref(false);
const showTips = ref(false);
const optionInfo = ref({ isShow: false });
const _isOpen = ref(false); //单条
const _isOpen2 = ref(false); //批量
const currObj = ref({});
const isOpenAttrFilter = ref(false); //是否打开更多筛选抽屉
const attrList = ref([]); //筛选属性列表
const _filterVal = ref([]); //用户选中的筛选属性值
const _filterVal3 = ref([]); //用户选中的3级筛选属性值
const _brandIds = ref([]);
const attrFilterRef = ref();
const currentNodeKey = ref(""); //1798922220132732928
const searchConditionList = ref([]); //从属性列表里面提取出来的筛选项

onMounted(() => {
  addScroll();
  getTree();
  getPageList();
  getSelectNUm();
  getPublishNums();
  getAttrFilterList();
});

watch(
  () => isEdit.value,
  val => {
    if (val) {
      showTips.value = true;
    }
  },
  { deep: true }
);
watch(
  () => store.dict,
  val => {
    // console.log("数据字典获取到了", val);
    formList.value.map(item => {
      if (item.model === "productStyle") {
        // 商品风格。下拉数据获取
        item.data = store.getDict("shop_product_style");
      } else if (item.model === "factoryGrade") {
        // 市场定位。下拉数据获取
        item.data = store.getDict("shop_product_factory_grade");
      }
    });
  },
  { deep: true, immediate: true }
);

/**跳转到设计师商城详情页 */
const toView = obj => {
  const baseRouter = window.microApp.router.getBaseAppRouter();
  const routeUrl = baseRouter.resolve({
    path: "/designer/shopDetail/index",
    query: { id: obj?.productId, review: true }
  });
  window.open(routeUrl.href, "_blank");
};

//属性筛选id改变时的回调
const changeAttr = ({ filterVal, filterVal3, brandIds }) => {
  console.log("子组件返回的数据===", filterVal, filterVal3, brandIds);
  _filterVal.value = filterVal;
  _filterVal3.value = filterVal3;
  _brandIds.value = brandIds;
  filterDataSubmit(); //属性筛选接口请求
};

/**
 *用户进行属性值勾选，筛选数据
 * @param init 为false时，不重置当前分页； 为true时，重置当前分页为1
 */
const filterDataSubmit = (init = true) => {
  // 属性值筛选数据
  // console.log("属性值筛选数据", _filterVal.value, _filterVal3.value);
  const attrIds2 = _filterVal.value.flat(); //选中的二级属性ids
  for (let ids2 of attrIds2) {
    const str = _filterVal3.value.find(item => typeof item === "string" && item.includes(ids2));
    !str && _filterVal3.value.push(ids2);
  }
  if (init) postData.form.page = 1;
  getPageList();
};

/**
 * 查询可筛选得属性数据
 */
const getAttrFilterList = async form => {
  await queryPreStastsList({
    searchKey: postData.form.searchKey,
    categoryId: postData.form.categoryId,
    ...form,
    areaId: formData.value.areaId ? Number(formData.value.areaId[formData.value.areaId.length - 1]) : ""
  }).then(res => {
    if (res.code === 200) {
      attrList.value = res.data;
      _filterVal.value = []; //清空属性筛选勾选项
      _filterVal3.value = []; //清空属性筛选勾选项
      attrFilterRef.value.reset(); //清空抽屉勾选的属性
      searchConditionList.value = res.data?.filter(item => item.isSearchCondition === 1);

      const Arr = JSON.parse(JSON.stringify(_formList.value));
      searchConditionList.value?.map(item => {
        Arr.push({
          label: item.stastsName,
          model: "stastsIdsStr;" + item.stastsId,
          type: "cascader",
          labelWidth: "auto",
          data: item.children,
          props: {
            checkStrictly: false,
            expandTrigger: "hover",
            value: "stastsId",
            label: "stastsName",
            multiple: item.stasType === 3
          }
        });
      });
      formList.value = Arr;
      if (formList.value?.length % 3 === 0) {
        formList.value = [...formList.value, {}, {}];
      } else if (formList.value?.length % 3 === 1) {
        formList.value = [...formList.value, {}];
      }

      console.log("这是筛选属性列表", attrList.value);
    }
  });
};

const returnSubmit = type => {
  // 请求返还平台的接口
  let ids = [];
  if (type === 1) {
    // 单条
    _isOpen.value = false;
    ids = [currObj.value.collectId];
  } else {
    // 批量
    _isOpen2.value = false;
    ids = checkList.value;
  }
  returnPlat({ collectIds: ids }).then(res => {
    if (res.code === 200) {
      // if (type === 1) _isOpen.value = false;
      // if (type === 2) _isOpen2.value = false;
      ElMessage({
        duration: "1000",
        showClose: false,
        customClass: "my-success-message",
        dangerouslyUseHTMLString: true,
        message: "<div class='img'></div><p>已将所选商品成功返还平台 ~ ~</p>"
      });

      getTree();
      getPageList();
      reviewCheck();
      // isEdit.value = false;
      type === 2 && resetChecked();
    }
  });
};
/**
 * 确认单条立即上架
 */
const _btnLoading = ref(false);
const submitOk = editInfo => {
  // console.log("这里请求立即上架接口", editInfo);
  _btnLoading.value = true;

  readyListing({ ...editInfo, publishStatus: 2 })
    .then(res => {
      if (res.code === 200) {
        _btnLoading.value = false; //弹窗“确认”按钮loading关闭
        optionInfo.value.isShow = false; //弹窗关闭

        ElMessage({
          duration: "1000",
          showClose: false,
          customClass: "my-success-message",
          dangerouslyUseHTMLString: true,
          message: "<div class='img'></div><p>已将所选商品成功上架到商城前台 ~ ~</p>"
        });
        getTree();
        getPageList();
        reviewCheck();
      } else {
        _btnLoading.value = false; //弹窗“确认”按钮loading关闭
      }
    })
    .catch(() => {
      _btnLoading.value = false; //弹窗“确认”按钮loading关闭
    });
};

/**
 * 打开详情数据组件弹窗
 */
const openInfoDialog = data => {
  // console.log("pppppppppp", data);

  optionInfo.value.isShow = true;
  optionInfo.value.categoryId = data.categoryId;
  optionInfo.value.collectId = data.collectId;
  optionInfo.value.data = data;
  optionInfo.value.categoryList = treeData;
};
/**
 * 关闭详情数据组件弹窗
 */
const closeInfoDialog = () => {
  optionInfo.value.isShow = false;
};

/**
 * 已上架总数
 */
const pubLicNum = ref(0);
const getPublishNums = async () => {
  const { data } = await getPublishNum();
  pubLicNum.value = data ?? 0;
};

/**
 *
 * @param data 获取可选商品的数量
 */
const selectNum = ref(0);
const getSelectNUm = () => {
  getNotSelectNum({
    page: 1,
    size: 9999
  }).then(res => {
    if (res.code === 200) {
      selectNum.value = res.data;
    }
  });
};

const clickSelectAll = val => {
  console.log("all=====", val, allowSelectList.value);

  const arr = []; //筛选出的非当前页选中项
  if (!val) {
    // 取消全选
    shopList.value.map(item => {
      const index = checkList.value.findIndex(item2 => item2 === item.collectId);
      if (index >= 0) {
        checkList.value.splice(index, 1);
      }
    });
  } else {
    // 全选
    checkList.value.map(item => {
      const currPids = shopList.value.map(item2 => item2.collectId);
      if (!currPids.includes(item)) {
        arr.push(item);
      }
    });
  }
  console.log(arr);

  checkList.value = val ? [...arr, ...allowSelectList.value.map(item => item.collectId)] : [...checkList.value];
  console.log("全选===", checkList.value);
  indeterminate.value = false;
};
/**
 *
 * @param 点击商品复选框
 */
const handleCheckedChange = value => {
  const arr = [];
  shopList.value.map(item => {
    if (value.includes(item.collectId)) {
      arr.push(item.collectId);
    }
  });
  const checkedCount = arr.length;
  selectAll.value = checkedCount !== 0 && checkedCount === allowSelectList.value.length;
  indeterminate.value = checkedCount > 0 && checkedCount < allowSelectList.value.length;
};

const cancel = (flag = false) => {
  resetChecked();
  isEdit.value = flag;
};

const resetChecked = () => {
  checkList.value = [];
  selectAll.value = false;
  indeterminate.value = false;
};

const currNode = ref({});
const handleNodeClick = (data, node) => {
  if (!node.isLeaf) return;
  currNode.value = data;
  _filterVal.value = []; //清空属性筛选勾选项
  _filterVal3.value = []; //清空属性筛选勾选项
  _brandIds.value = [];
  attrFilterRef.value.reset(); //清空抽屉勾选的属性
  cancel();
  postData.form.categoryId = data.categoryId;
  postData.form.page = 1;
  postData.form.size = 12;
  total.value = 0;
  getPageList();
  getAttrFilterList();
};

const getTree = async () => {
  await getPreCategoryList(postData.form).then(res => {
    treeData.value = res.data || [];

    nextTick(() => {
      if (postData.form.categoryId) {
        currentNodeKey.value = postData.form.categoryId;
        // currentNodeKey.value = "1798922220132732928";
      }
    });
  });
};

const handelSearch = async () => {
  postData.form.page = 1;
  postData.form.size = 12;
  total.value = 0;
  await getPageList();
  reviewCheck();
  getAttrFilterList();
};

const handleCurrentChange = async val => {
  postData.form.page = val;
  await getPageList();
  reviewCheck();
};
const handleSizeChange = async val => {
  postData.form.size = val;
  await getPageList();
  reviewCheck();
};
const reviewCheck = () => {
  const arr = [];
  shopList.value.map(item => {
    if (checkList.value.includes(item.collectId)) {
      arr.push(item.collectId);
    }
  });
  handleCheckedChange(arr);
};
const getPageList = async () => {
  console.log("列表查询");
  loading.value = true;

  const params = {
    ...postData.form,
    ...formData.value,
    stastsIdsStr: _filterVal3.value, //属性筛选ids
    brandIds: _brandIds.value, //品牌id
    areaId: formData.value.areaId ? Number(formData.value.areaId[formData.value.areaId.length - 1]) : ""
  };
  const _params = { ...params };
  params._stastsIdsStr = [];
  Object.keys(_params)?.map(key => {
    if (key.includes("stastsIdsStr;")) {
      delete params[key];
      _params[key]?.map(item => {
        if (typeof item === "string") {
          params._stastsIdsStr.push(item);
        } else {
          params._stastsIdsStr.push(item?.join("-"));
        }
      });
    }
  });
  const stastsIdsStr = [...new Set([...params.stastsIdsStr, ...params._stastsIdsStr])]; //合并两个数组，并去重
  delete params._stastsIdsStr;

  await getPreSelectList({ ...params, stastsIdsStr })
    .then(res => {
      const { data } = res;
      shopList.value = data.records || [];
      total.value = data.total;

      // 获取可以被选中的商品，这里是全部当前页
      allowSelectList.value = data.records;

      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
};

/**
 * 点击搜索按钮
 */
const formData = ref({});
const search = form => {
  formData.value = JSON.parse(JSON.stringify(form));
  if (formData.value?.buinessAddressIdList) {
    const arr = formData.value?.buinessAddressIdList?.map(item => item.join(","));
    formData.value.buinessAddressIdList = arr;
  }
  getPageList();
  getAttrFilterList(formData.value);
};

/**
 * 点击重置按钮的回调
 */
const reset = () => {
  console.log("点击重置表单");
  formData.value = {};
  postData.form.page = 1;
  total.value = 0;
  getPageList();
  getAttrFilterList(formData.value);
};

//监听滚动
const showSelect = ref(false);
const scollNum = ref(0);
const handleScroll = event => {
  // 获取滚动位置
  const currentScrollTop = event.target.scrollTop;
  // 处理distance，比如更新data或者做其他操作
  scollNum.value = currentScrollTop;
  const scrollTop = document.querySelector(".preselection-container").scrollTop;
  const searchDomTop = document.querySelector(".content-bottom").offsetTop;
  if (scrollTop >= searchDomTop) {
    showSelect.value = true;
  } else {
    showSelect.value = false;
  }
};
const addScroll = () => {
  const container = document.querySelector(".preselection-container");
  container.addEventListener("scroll", handleScroll);
};
const removeScroll = () => {
  const container = document.querySelector(".preselection-container");
  container.removeEventListener("scroll", handleScroll);
};
onUnmounted(() => {
  removeScroll();
});
</script>

<style lang="scss">
.my-success-message {
  width: 578px !important;
  height: 250px !important;
  border-radius: 16px !important;
  box-shadow: 0px 4px 25px 0px rgba(4, 19, 74, 0.3);
  background-color: white;
  text-align: center;
  top: calc((100vh - 250px) / 2) !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .el-icon.el-message__icon {
    display: none;
  }
  .el-message__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .img {
    width: 100px;
    height: 100px;
    background: url("@/assets/images/mall/success.png");
    margin-bottom: 40px;
  }
  .img + p {
    font-size: 14px;
    color: #3d3d3d;
  }
}
</style>
<style lang="scss" scoped>
:deep(.el-tree) {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 94px;

  .el-icon.el-tree-node__expand-icon {
    padding-left: 10px;
  }

  .el-tree-node.is-current > .el-tree-node__content {
    background-color: #d9e8ff !important;
    color: #007dff;
    .custom-tree-node i {
      color: #007dff !important;
    }
  }
}
.btn-wrap {
  display: flex;
  justify-content: space-between;
}
.tips {
  padding: 0 10px;
  line-height: 32px;
  height: 32px;
  background-color: #e0eaff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0 10px 20px 10px;
  border-radius: 4px;
  span {
    display: inline-block;
    flex: 1;
  }
  i {
    width: 16px;
  }
}
.select-all-wrap {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 260px;
  z-index: 2;

  & > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    height: 50px;
    padding: 0 20px;
    box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.1);

    & > div {
      display: flex;
      align-items: center;
    }
  }
}

.fix-wrap {
  position: absolute;
  top: 73px;
  bottom: 0px;
  background-color: white;
  border-radius: 0 0 0 10px;
  border-right: 1px solid #d8d8d8;
  overflow-y: hidden;

  & > div {
    height: 100% !important;
  }

  & > div > div:first-of-type {
    height: 100% !important;
  }
}

.fix-wrap + .el-main {
  margin-left: 260px;
}

.preselection-container {
  height: calc(100% - 0px);
  overflow-y: auto;
  padding-top: 0;
  padding-bottom: 0;

  .title {
    padding-left: 14px;
    position: relative;
    color: #131414;
    margin: 25px 0 16px 20px;
    display: flex;
    justify-content: space-between;

    &:before {
      position: absolute;
      content: "";
      left: 0;
      top: 8px;
      width: 6px;
      height: 6px;
      background-color: #409eff;
      border-radius: 50%;
    }
  }
  .gray-btn {
    display: flex;
    font-size: 12px;
    padding-right: 12px;

    & > div {
      padding: 1px 6px;
      height: 22px;
      line-height: 22px;
      background-color: #f0f0f0;
      border-radius: 3px;
      text-align: center;
    }
  }

  .content-top {
    .steps-wrap {
      border-bottom: 2px solid rgba(4, 19, 74, 0.04);
      margin: 0 -20px;
      padding: 20px 0 20px 20px;
      max-height: 222px;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .search-wrap {
      padding: 20px;
      background-color: #f6f8fa;
      margin: 20px 0 0 0;
    }
  }

  .content-bottom {
    margin-top: 20px;
    margin: 0 -20px;

    .searchkey-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      background-color: white;
      border-bottom: 1px solid #d8d8d8;
      padding: 20px;
      border-radius: 5px 5px 0 0;
      z-index: 2;

      :deep(.searchkey-input) {
        .el-input__wrapper {
          border-radius: 16px;
          background: #f6f8fa;
        }
      }

      .left {
        display: flex;
        align-items: center;

        & > div:first-of-type {
          width: 200px;
          height: 32px;
          line-height: 32px;
          background: #f6f8fa;
          box-shadow: inset 2px 3px 7px 0px rgba(3, 56, 129, 0.18);
          border-radius: 4px 4px 4px 4px;
          padding-left: 12px;
        }
      }
    }

    :deep(.el-aside) {
      width: 260px;
      border-right: 1px solid #d8d8d8;

      & > div {
        position: relative;
      }

      & > div > div {
        height: calc(100vh - 330px - 135px);
        overflow-y: auto;
      }
      .submit-btn {
        position: fixed;
        height: 95px;
        bottom: 20px;
        width: 259px;
        background-color: white;
        border-radius: 0 0 0 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-top: 1px solid #dcdfe6;
      }
    }

    :deep(.el-main) {
      background-color: #f6f8fa;
      margin-bottom: 20px;
      .el-checkbox-group {
        width: 100%;
        // display: flex;
        // flex-wrap: wrap;
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        margin-bottom: 20px;
      }
      .el-checkbox {
        .el-checkbox__inner {
          border-radius: 50%;
          display: inline-block;
          width: 24px;
          height: 24px;

          &::before {
            text-align: center;
            left: 0px;
            top: 10px;
          }

          &::after {
            font-size: 24px;
            text-align: center;
            left: 8px;
            top: 5px;
            width: 5px;
          }
        }
      }

      .el-col-6 {
        max-width: none;
        display: flex;
        justify-content: center;
      }

      .shop-box {
        .el-checkbox {
          position: absolute;
          left: 10px;
          top: 6px;

          .el-checkbox__inner {
            border-radius: 50%;
            display: inline-block;
            width: 24px;
            height: 24px;

            &::after {
              font-size: 24px;
              text-align: center;
              left: 8px;
              top: 5px;
              width: 5px;
            }
          }
        }

        & > div {
          height: 100%;
          overflow: hidden;
          // margin-bottom: 20px;
          position: relative;
          background: #ffffff;
          box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
          border-radius: 10px 10px 10px 10px;
          display: flex;
          flex-direction: column;

          .top {
            height: 200px;
            min-height: 200px;
            max-height: 200px;

            .img-box {
              width: 100%;
              height: 100%;
              box-shadow: 4px 0px 4px 0px rgba(4, 19, 74, 0.1);
              border-radius: 10px 10px 10px 10px;

              img {
                width: 100%;
                box-shadow: 4px 0px 4px 0px rgba(4, 19, 74, 0.1);
                border-radius: 10px 10px 10px 10px;
                height: 100%;
              }
            }
          }

          .bottom {
            flex: 1;
            padding: 20px 7px 30px 12px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .header-title {
              font-family:
                Microsoft YaHei,
                Microsoft YaHei;
              font-weight: 700;
              // min-height: 50px;
              font-size: 14px;
              color: #3d3d3d;
              margin-bottom: 12px;
              line-height: 24px;
              text-align: left;
              font-style: normal;
              text-transform: none;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              text-transform: none;
            }

            .header-price {
              font-family:
                Microsoft YaHei,
                Microsoft YaHei;
              font-weight: 400;
              font-size: 14px;
              margin-bottom: 10px;
              color: #4e5969;
              line-height: 24px;
              text-align: left;
              font-style: normal;
              text-transform: none;

              span:nth-child(2) {
                // color: red;
              }
            }

            .choose-shop {
              font-family:
                Microsoft YaHei,
                Microsoft YaHei;
              font-weight: 400;
              font-size: 14px;
              margin-bottom: 10px;
              color: #4e5969;
              line-height: 24px;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }

            .area {
              display: flex;
              align-items: center;
              cursor: pointer;
              justify-content: center;
              height: 32px;
              margin-bottom: 30px;
              background: #007dff;
              font-family:
                PingFang SC,
                PingFang SC;
              font-weight: 400;
              font-size: 14px;
              color: rgba(255, 255, 255, 0.9);
              line-height: 22px;
              text-align: center;
              font-style: normal;
              text-transform: none;
              border-radius: 3px 3px 3px 3px;

              &.active {
                background: #86909c;
              }
            }
          }
        }
      }

      .pagination {
        display: flex;
        justify-content: flex-end;
        padding-bottom: 20px;
      }
    }
  }
}

:deep(.el-steps) {
  .el-step__icon-inner {
    margin-top: -3px;
  }

  .el-step {
    position: relative;
    flex-basis: 40% !important;
    &.is-flex,
    &:last-of-type.is-flex {
      flex-basis: 40% !important;
    }

    .el-step__head.is-success {
      border-color: transparent;

      .el-step__line {
        height: 0;
        background-color: transparent;
      }

      .el-step__icon.is-text {
        background-color: #007dff;
        color: white;
      }
    }

    .el-step__head.is-process {
      .el-step__icon.is-text {
        border: none;
        background-color: white;
        color: white;
        border: 1px solid rgba(0, 0, 0, 0.4);
      }
    }

    .el-step__head.is-wait {
      .el-step__icon.is-text {
        border: none;
        background-color: #f2f3f5;
        color: #4e5969;
      }
    }

    .el-step__title.is-wait {
      color: #4e5969;
    }

    .el-step__main {
      position: absolute;
      top: -8px;
      left: 40px;

      .el-step__title {
        font-weight: normal;

        &.is-success {
          color: #4e5969;
        }
      }
    }

    .el-step__line-inner {
      border: none;
    }

    .el-step__line {
      left: 160px;
      right: 25px;
      height: 0px;
      background-color: transparent;
      border-bottom: 1px dashed #d8d8d8;
    }
  }
}
</style>
